<template>
  <div px-80rpx>
    <!-- <div class="title">{{ welcome[current].title }}</div> -->
    <!-- <div :class="current === 1 ? 'desc-light' : 'desc'">
      {{ welcome[current].desc }}
    </div> -->
    <mobileVerify v-if="!isVerify" verify @verify="verify" business="FIND_USER" />
    <nut-config-provider
      :theme-vars="{
        cellBoxShadow: 'none',
        cellPadding: '23rpx 0'
      }">
      <nut-form v-if="isVerify" label-position="top" ref="validateForm" :model-value="accountForm">
        <nut-form-item :show-error-line="false" :rules="rules.password" label="旧密码" prop="newPassword">
          <nut-input
            :input-style="passwordInputStyle"
            :border="false"
            v-model="accountForm.password"
            class="nut-input-text"
            placeholder="请输入旧密码"
            type="password" />
        </nut-form-item>
        <nut-form-item :show-error-line="false" :rules="rules.newPassword" label="新密码" prop="password">
          <nut-input
            :input-style="passwordInputStyle"
            :border="false"
            v-model="accountForm.newPassword"
            class="nut-input-text"
            :clearable="false"
            type="password"
            placeholder="请输入新密码" />
        </nut-form-item>
        <div mt-40rpx>
          <nut-button type="primary" block :loading="loading" class="submit" @click="operation">提交</nut-button>
        </div>
      </nut-form>
    </nut-config-provider>
  </div>
</template>

<script setup lang="ts">
import { modifyPass, resetByMobile } from '@/api/member'
import { passwordInputStyle } from '@/components/useful-template/login/common'
import mobileVerify from '@/components/useful-template/login/mobile.vue'
import { Md5 } from 'ts-md5'
const current = ref(2)
const isVerify = ref(true)
const loading = ref(false)
const welcome = [
  {
    title: '安全验证',
    desc: '请输入当前手机号进行验证'
  },
  {
    title: '请输入验证码',
    desc: '已经发送验证码至您的手机号'
  },
  {
    title: '验证通过',
    desc: '请输入新密码'
  }
]
// 账户登录
const accountForm = ref({
  newPassword: '',
  password: ''
})
const rules = {
  newPassword: [
    {
      required: true,
      message: '新密码不能为空',
      trigger: 'change'
    }
  ],
  password: [
    {
      required: true,
      message: '密码不能为空',
      trigger: 'change'
    }
  ]
}
async function verify({ mobile, code }: any) {
  const res = await resetByMobile({ mobile, code })
  if (res.data.success) {
    // 验证通过
    current.value = 2
    isVerify.value = true
  }
}

async function operation() {
  if (!accountForm.value.password) {
    uni.showToast({
      title: '请输入旧密码',
      icon: 'none'
    })
    return
  }
  if (!accountForm.value.newPassword) {
    uni.showToast({
      title: '请输入新密码',
      icon: 'none'
    })
    return
  }
  try {
    if (accountForm.value.password === accountForm.value.newPassword) {
      loading.value = true
      const submit = JSON.parse(JSON.stringify(accountForm.value))
      submit.password = Md5.hashStr(submit.password)
      submit.newPassword = Md5.hashStr(submit.newPassword)
      const res = await modifyPass(submit)
      loading.value = false
      if (res.data.success) {
        uni.showToast({
          title: '修改成功!',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 500)
      }
    } else {
      uni.showToast({
        title: '两次输入的密码不一致',
        icon: 'none'
      })
    }
  } catch (error) {
    setTimeout(() => {
      loading.value = false
    }, 2000)
  }
}
</script>
<style>
page {
  background: #fff;
}
</style>
<style scoped lang="scss">
.title {
  padding-top: calc(104rpx);
  font-style: normal;
  line-height: 1;
  font-weight: 500;
  font-size: 56rpx;
  color: #333;
}

.desc {
  color: #333;
}

.desc-light {
  color: #999999;

  > span {
    color: #333;
    margin-left: 8rpx;
  }
}

.desc,
.desc-light {
  font-size: 32rpx;
  line-height: 32rpx;
  color: #333333;
  margin-top: 40rpx;
}
</style>
